<!-- 聊天List -->
<template>
  <div id="purchaseApplyList">
    <el-form :inline="true" label-position="left" label-width="100px">
      <div style="margin-left:10px;line-height:40px;font-size:22px;font-weight:400;">
        <div style="margin-left:15px;">
          <el-row>
            <el-form-item label="视频标题">
              <el-input v-model="form.videoName" clearable placeholder="请输入视频标题" style="width:230px"></el-input>
            </el-form-item>
            <el-form-item label="聊天人">
              <el-input v-model="form.createUserName" clearable placeholder="请输入聊天人" style="width:230px"></el-input>
            </el-form-item>
            <el-form-item label="聊天内容">
              <el-input v-model="form.content" clearable placeholder="请输入聊天内容" style="width:230px"></el-input>
            </el-form-item>
            <el-form-item label="聊天类型">
              <el-select v-model="form.operateType"  placeholder="请选择聊天类型">
                <el-option
                  v-for="item in operateTypeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <div style="float:right">
              <el-button type="primary" @click="btnPageList(true)" icon="my-search" class="mL57">搜索</el-button>
              <el-button type="primary" @click="btnReset" icon="my-spinner11">重置</el-button>
            </div>
          </el-row>
        </div>
      </div>
    </el-form>
    <!-- 列表 -->
    <el-row>
      <el-table v-loading="loadingTableData" :data="tableData" row-key="id" :stripe="false" style="width: 100%">
        <el-table-column label="序号" type="index" show-overflow-tooltip width="50">
        </el-table-column>
        <el-table-column prop="chatType" label="类型" :formatter="formateChatType"></el-table-column>
        <el-table-column prop="videoName" label="关联视频"></el-table-column>
        <el-table-column prop="createUserName" label="聊天人"></el-table-column>
        <!--<el-table-column prop="createUserDepart" label="聊天人部门"></el-table-column>-->
        <el-table-column prop="content" label="内容">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top">
              <p>{{ scope.row.content }}</p>
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">{{ scope.row.content.substring(0,100) }}</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" :formatter="$$$dateFormat" label="聊天时间"></el-table-column>
        <el-table-column prop="updateUserName" label="修改人"></el-table-column>
        <el-table-column prop="updateTime" :formatter="$$$dateFormat" label="修改时间"></el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button type="text" v-if="scope.row.muted != 1" @click="doMutedByChat(scope.row, '1')">禁言用户
            </el-button>
            <el-button type="text" v-if="scope.row.muted == 1" @click="doMutedByChat(scope.row, '0')">解禁用户
            </el-button>
            <el-button type="text" @click="deleteChat(scope.row)">删除</el-button>
            <el-button type="text" @click="batchChat(scope.row)">批量删除</el-button>
            <el-button type="text" @click="exportChatData(scope.row)">导出</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <!-- 分页 -->
    <div class="mT20 mB20 float-right" style="width:100%;text-align:right;">
      <div style="float:right">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                       :current-page="form.pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="form.pageSize"
                       layout="total, sizes, prev, pager, next, jumper" :total="form.total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  import {liveChatAPI, liveBasicAPI} from "@/api/index";
  import liveUserList from "../liveBasic/liveUserList";

  export default {
    components: {},
    data() {
      return {
        loginUser: {
          uid: this.$root.uid,
          username: this.$root.username,
          email: this.$root.email
        },
        loadingTableData: false,
        form: {
          pageIndex: 1,
          pageSize: 10,
          total: 0,
        },

        tableData: [], //列表
        loading: false,
        operateTypeList: [
          {
            value: 0,
            label: "聊天"
          },
          {
            value: 1,
            label: "提问"
          },
        ],
      };
    },
    created: function () {
      //获取采购申请单列表
      this.btnPageList();
    },
    methods: {
      //每页显示条数更改
      handleSizeChange(pageSize) {
        this.form.pageSize = pageSize;
        this.btnPageList();
      },
      //跳转、下一页等
      handleCurrentChange(pageIndex) {
        this.form.pageIndex = pageIndex;
        this.btnPageList();
      },
      //重置
      btnReset() {
        this.form.pageIndex = 1;
        this.form.videoName = ''
        this.form.createUserName = ''
        this.form.content = ''
        this.form.operateType = '';
        this.btnPageList();
      },
      formateChatType(row, column) {
        var status = row[column.property];
        if (status == undefined) {
          return "";
        }
        if (status == 0) {
          return "聊天"
        } else if (status == 1) {
          return "提问"
        }
      },
      //查询
      btnPageList(isClickFlag) {
        this.loadingTableData = true;
        //判断是否点击查询按钮
        if (isClickFlag) {
          this.form.pageIndex = 1;
        } else {
        }
        //请求后台
        liveChatAPI.getLiveChatPage(
          this.form,
          res => {
            if (res) {
              this.loadingTableData = false;
              //赋值
              this.tableData = res.records
              this.tableData.forEach((value, index, array) => {
                value.createUserName = value.createUserCode + "-" + value.createUserName
              })

              this.form.total = res.total;
              this.form.pageIndex = res.page.pageIndex;
              this.form.pageSize = res.page.pageSize;
            }
          },
          (error) => {
            this.$notify.error({
              title: '警告',
              message: error
            })
            this.loadingTableData = false;
          }
        );
      },
      doMutedByChat(row, type) {// 根据聊天禁言用户
        this.$confirm(' 是否禁言当前用户?', '友情提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let params = {
            userCode: row.createUserCode,
            muted: type
          }
          liveBasicAPI.updateLiveUser(params, res => {
            if (res) {
              this.$message.success("禁言成功")
              this.btnPageList();
            }
          })
        })
      },
      deleteChat(row) {
        this.$confirm('是否删除当前聊天信息?', '友情提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var params = {
            id: row.id,
            videoId: row.videoId,
            chatType: row.chatType,
            operateType: 0 // 单独删除
          }

          liveChatAPI.deleteChat(params, res => {
            if (res) {
              this.$message.success("删除成功")
              this.btnPageList();
            }
          });
        })
      },
      batchChat(row) {
        this.$confirm('操作会删除 ' + row.videoName + "当前类型的所有信息！请慎重！", '友情提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var params = {
            id: row.id,
            videoId: row.videoId,
            chatType: row.chatType,
            operateType: 1 // 批量删除
          }
          liveChatAPI.deleteChat(params, res => {
            if (res) {
              this.$message.success("批量删除成功")
              this.btnPageList();
            }
          });
        })
      },
      exportChatData(row) { // 导出聊天/提问数据
        var params = {
          id: row.id,
          videoId: row.videoId,
          chatType: row.chatType,
          title: row.videoName
        }
        window.location.href="/live/liveChat/exportChatData?obj=" + encodeURIComponent(JSON.stringify(params));
      }
    },
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .mL57 {
    margin-left: 57px !important;
  }

  .el-tag {
    background-color: rgba(255, 255, 255, 0.2);
    border: 0px;
  }

  .div_total {
    line-height: 32px;
    display: inline;
    font-size: 16px;
    color: #606266;
    margin: 5px 100px 0px 0px;
  }
</style>
